<template>
	<view>
		<view v-if="loading" class="skeleton" :class="{ animate: animate }">
			<!-- 影院地址 -->
			<view class="skeleton_address">
				<view class="skeleton_address_cinema">
					<view class="skeleton_address_cinema_name skeleton_bg"></view>
					<view class="skeleton_address_cinema_text skeleton_bg"></view>
				</view>
				<view class="skeleton_address_map skeleton_bg"></view>
			</view>
			<!-- 轮播 -->
			<view class="skeleton_banner">
				<view class="skeleton_banner_bg skeleton_bg"></view>
				<view class="skeleton_banner_info">
					<view class="skeleton_banner_info_name skeleton_bg"></view>
					<view class="skeleton_banner_info_schedule skeleton_bg"></view>
				</view>
			</view>
			<!-- 场次 -->
			<view class="skeleton_schedule">
				<view class="skeleton_schedule_tab skeleton_bg" ></view>
				<view class="skeleton_schedule_list">
					<view class="skeleton_schedule_list_item skeleton_bg" v-for="(item, index) in row" :key="index" >

					</view>
				</view>
			</view>
		</view>
		<view v-else><slot></slot></view>
	</view>
</template>

<script>
const DEFAULT_ROW_WIDTH = '100%';
const DEFAULT_LAST_ROW_WIDTH = '60%';

export default {
	props: {
		loading: {
			type: Boolean,
			default: true
		},
		row: {
			type: Number,
			default: 3
		},
		animate: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {};
	},
	computed: {

	}
};
</script>

<style lang="scss">
.skeleton {
	display: flex;
	flex-direction: column;
}
.skeleton.animate {
	animation: skeleton-blink 1.2s ease-in-out infinite;
}
@keyframes skeleton-blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
	100% {
		opacity: 1;
	}
}

.skeleton_bg {
	background-color: #f2f3f5;
	margin: 6;
}
.skeleton_address {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 600rpx;
	margin: 0 auto;
	height: 133rpx;
	&_cinema {
		height: 133rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-around;
		&_name {
			height: 49rpx;
		}
		&_text {
			height: 49rpx;
		}
	}
	&_map {
		margin-left: 33rpx;
		height: 120rpx;
		width: 120rpx;
	}
}
.skeleton_banner {
	margin-top: 33rpx;
	position: relative;
	&_bg {
		position: absolute;
		z-index: 0;
		height: 333rpx;
		width: 750rpx;
	}
	&_info {
		height: 133rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-top: 333rpx;
		&_name {
			width: 333rpx;
			height: 44rpx;
		}
		&_schedule {
			width: 333rpx;
			height: 44rpx;
		}
	}
}
.skeleton_schedule {
	display: flex;
	flex-direction: column;
	align-items: center;
	&_tab {
		width: 750rpx;
		height: 88rpx;
	}
	&_list {
		width: 700rpx;
		&_item {
			margin-top: 33rpx;
			padding: 66rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}
</style>
